<template>
  <div class="music-box" >
      <div :style="backgroundDiv">
        <audio src="../assets/musics/YOUTH.wav" controls="controls" class="audiobar"/>
      </div>
  </div>
</template>

<style scoped>
.music-box {
  width: 290px;
  border-radius: 20px;
  box-shadow:white 0px 0px 10px;
}

.audiobar{
    margin-top: 185px;
    width: 280px;
    outline: none;
}
</style>

<script>


export default {
  name:"Music",
   data() {
    return {
      backgroundDiv: {
        background: "url(" + require("../assets/images/troye.jpg") + ")  center center ",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        width:"290px",
        height:"250px",
        textAlign:"center",
        verticalAlign:"bottom",
        padding:"5px",
        borderRadius: "20px",
        

      }
    };
  }
  
};

</script>